// 调用 setPopup({ map, position: [114.3, 30.5], contentHtml: '1111' })

export function usePopup({ map, position, contentHtml }) {
  // 要素的样式函数
  var createLabelStyle = function (feature) {
    return new ol.style.Style({
      image: new ol.style.Icon(
        /** @type {olx.style.IconOptions} */
        ({
          //设置图标点
          anchor: [0.5, 60],
          //图标起点
          anchorOrigin: 'top-right',
          //指定x值为图标点的x值
          anchorXUnits: 'fraction',
          //指定Y值为像素的值
          anchorYUnits: 'pixels',
          //偏移
          offsetOrigin: 'top-right',
          // offset:[0,10],
          //图标缩放比例
          // scale:0.5,
          //透明度
          opacity: 0.75,
          //图标的url
          src: './location.png'
        })
      )
    })
  }

  /* 1.设置点要素图层 */
  // var Point = new ol.Feature({
  //   geometry: new ol.geom.Point(position)
  // })
  // Point.setStyle(createLabelStyle(Point))
  // var source = new ol.source.Vector({
  //   features: [Point]
  // })
  // var layer = new ol.layer.Vector({
  //   source
  // })
  // map.addLayer(layer)

  /* 2、设置overlay */
  // 2.1.创建实现popup的DOM
  var container = document.getElementById('popup')
  container.innerHTML = ''
  var closer = document.createElement('a')
  closer.href = '#'
  closer.id = 'popup-closer'
  closer.className = 'ol-popup-closer'
  var content = document.createElement('div')
  content.innerHTML = contentHtml
  content.id = 'popup-content'
  container.appendChild(closer)
  container.appendChild(content)

  // 2.2.在地图容器中创建一个Overlay实例
  var popup = new ol.Overlay({
    //要转换成overlay的DOM
    element: container,
    //当前窗口可见
    autoPan: true,
    //Popup放置的位置
    positioning: 'bottom-center',
    //Popup显示的位置
    position: position,
    //是否应该停止事件传播到地图窗口
    stopEvent: false,
    autoPanAnimation: {
      //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
      duration: 250
    }
  })
  map.addOverlay(popup)

  //  2.3.为map添加点击事件监听，关闭popup
  closer.onclick = function () {
    //未定义popup位置
    popup.setPosition(undefined)
    //失去焦点
    closer.blur()
    return false
  }

  // 2.4.为map添加点击事件监听，渲染弹出popup
  // map.on('click', function (evt) {
  //   //判断当前单击处是否有要素，捕获到要素时弹出popup
  //   var feature = map.forEachFeatureAtPixel(
  //     evt.pixel,
  //     function (feature, layer) {
  //       return feature
  //     }
  //   )
  //   if (feature) {
  //     if (popup.getPosition() == undefined) {
  //       //设置popup的位置
  //       var position = feature.getGeometry().getCoordinates()
  //       popup.setPosition(position)
  //     }
  //   }
  // })

  // 2.5.为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
  map.on('pointermove', function (e) {
    var pixel = map.getEventPixel(e.originalEvent)
    var hit = map.hasFeatureAtPixel(pixel)
    map.getTargetElement().style.cursor = hit ? 'pointer' : ''
  })
}
